<template>
	<view style="height: 100%;background-color: #fff;">
		<view style="padding: 10px;">
			<view style="background-color: #007AFF;border-radius: 10px;color: #fff;padding: 10px;">
				<uni-row>
				    <uni-col :span="18">
						<text v-if="address_empty">暂无地址</text>
						<text style="padding-right: 5px;">{{address.realname}}</text>
						<text>{{address.mobile_number}}</text>
				    </uni-col>
				    <uni-col :span="6">
						<view style="text-align: right;" @click="editAddress">修改地址</view>
				    </uni-col>
				</uni-row>
				<view style="margin-top: 10px;">{{address.region}}{{address.address}}</view>
			</view>
			<view style="font-size: 20px;font-weight: bold;border-bottom: 1px solid #eee;padding: 20px 0;">
				订单详情
			</view>
			<uni-row style="padding: 10px 0;">
			    <uni-col :span="12">
					服务项目:
			    </uni-col>
			    <uni-col :span="12">
					<view style="text-align: right;">{{services_detail.title}}</view>
			    </uni-col>
			</uni-row>
			<uni-row style="padding: 10px 0;">
			    <uni-col :span="12">
					服务时间:
			    </uni-col>
			    <uni-col :span="12">
					<view style="text-align: right;">
						 
							<uni-datetime-picker 
								type="datetime"
								v-model="datetimesingle"
								@change="changeLog"
							>
								{{sel_datetime}}
							</uni-datetime-picker>
					</view>
			    </uni-col>
			</uni-row>
			<uni-row style="padding: 10px 0;">
			    <uni-col :span="12">
					服务定金:
			    </uni-col>
			    <uni-col :span="12">
					<view style="text-align: right;color: red;">￥{{services_detail.front_price}}</view>
			    </uni-col>
			</uni-row>
			<uni-row style="padding: 10px 0;">
			    <uni-col :span="12">
					订单备注:
			    </uni-col>
			    <uni-col :span="12">
					<view style="text-align: right;color: #ddd;"></view>
			    </uni-col>
			</uni-row>
			
			 <view class="">
				<textarea v-model="memo" maxlength="500" value='' placeholder="您可以添加文字/照片描述设备故障情况"/>
			</view>
			
			<view style="margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #eee;">
				<view class="block-content">
					<view v-for="(item, idx) in pics" class="character-avatar">
						<image :src="item"
							@click="pics = pics.filter((_image)=>_image !== item)" />
					</view>
					<view class="character-avatar">
						<image @click="selectPics()" src="../../static/ic_add_from_device.png" />
					</view>
					<!-- <view v-for="(item,idx) in materials" class="character-avatar">
						<image class="simage" v-for="(item1,index) in item.album" v-show="item.label == selected_label" :src="item1" @click="selectPic(item1)"/>
					</view> -->
				</view>
			</view>
			<button type="warn" @click="yuyue()">立即预约</button>
		</view>
		
		
		<uni-popup :animation="false" ref="popup" :mask-click="false">
		    <view style="background-color: #fff;width: 100%;padding: 10px;text-align: center;">
				<view style="padding: 20px;">尊敬的用户，您的订单已预约成功!</view>
				<button size="mini" type="warn" @click="orderList()">查看订单信息</button>
			</view>
		    
		</uni-popup>
		<!-- <uni-popup ref="popup" type="center" :animation="false">
			<uni-popup-dialog mode="input" message="尊敬的业主:" :duration="2000" :before-close="true" @close="close" @confirm="confirmCommunity">
				<view style="background-color: #fff;width: 100%;padding: 10px;">
					<view style="color: gray;font-size: 12px;">系统正在为您开启 xxxxx，是否确认开启</view>
				</view>
			</uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: {id: 0},
				address_empty: false,
				datetimesingle: "",
				sel_datetime: '请选择',
				post_datetime: '',
				ids: '',
				services_detail: {title: '', front_price: 0.00},
				memo: '',
				pics: [],
			}
		},
		onLoad(opts) {
			this.ids = opts.id;
			this.getServicesDetail()
		},
		onShow() {
			this.getDefAddress();
		},
		methods: {
			getDefAddress() {
				let that = this;
				this.$api.getDefAddress({uid: this.$common.getUser()}).then(res => {
					if (res.meta.code == '000') {
						if (res.data) {
							that.address = res.data;
						}
					} else {
						that.address_empty = true;
					}
				})
			},
			getServicesDetail() {
				let that = this;
				this.$api.getSeivcesDetail({ids: this.ids}).then(res => {
					if (res.meta.code == '000') {
						that.services_detail = res.data;
					}
				})
			},
			changeLog(e) {
				this.sel_datetime = e;
				this.post_datetime = e;
			},
			yuyue() {
				let that = this;
				if (this.post_datetime == '' || this.address.id == 0) {
					uni.showToast({
						title: '请完整信息',
						duration: 2000,
						icon: 'none',
					})
					return;
				}
				
				this.$api.postSeivceOrder({
					ids: this.ids,
					title: this.services_detail.title,
					front_price: this.services_detail.front_price,
					memo: this.memo,
					service_start: this.post_datetime,
					address_id: this.address.id,
					uid: this.$common.getUser(),
				}).then(res => {
					if (res.meta.code == '000') {
						that.pics.forEach(function(item, i) {
							that.$api.postFiles(item, res.data.id, res.data.entity_class, 'album');
						})
						this.$refs.popup.open();
					}
				})
				
			},
			orderList() {
				uni.redirectTo({
					url: '/pages/order/index'
				})
			},
			editAddress() {
				uni.navigateTo({
					url: '/pages/user/address'
				})
			},
			selectPics() {
				let that = this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.pics.push(tempFilePaths[0]);
						// console.log(chooseImageRes)
				    }
				});
				
				// uni.chooseImage({
				//     success: (chooseImageRes) => {
				//         const tempFilePaths = chooseImageRes.tempFilePaths;
				//         uni.uploadFile({
				//             url: 'http://app.jiuzhouyijia.test/v1/uploadfiles',
				//             filePath: tempFilePaths[0],
				//             name: 'file',
				//             formData: {
				//                 'user': 'test'
				//             },
				//             success: (uploadFileRes) => {
				//                 console.log(uploadFileRes.data);
				//             }
				//         });
				//     }
				// });
			},
		}
	}
</script>

<style lang="less">
	uni-page-body {
		height: 100%;
	}
	.block-content {
		display: flex;
		&>.character-avatar {
			margin-left: 0;
			margin-right: 5px;
	
			&>image {
				width: 75px;
				height: 75px;
				border-radius: 10px;
				margin-right: 2px;
			}
		}
	}
</style>
